<template>
	<view class="content">
		<z-paging :show-refresher-when-reload="true" ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<scroll-view class="Scroll-view-H" :scroll-x="true">
					<view class="flex_heng">
						<view @click="choose(index)" v-for="(item, index) in ping_list" :key="index" :class="isChoose == index ? 'choose' : ''" class="bar_item">
							{{ item.name }}({{ item.number }})
						</view>
					</view>
				</scroll-view>
			</template>
			<view class="item_box">
				<view class="item" v-for="(item, index) in dataList" :key="item.index">
					<view class="item_user">
						<view class="uni-flex uni-align-center">
							<view class="item_user_icon">
								<u-image width="64rpx" height="64rpx" shape="circle" :src="item.user_pic"></u-image>
							</view>
							<view class="name">
								{{item.is_anonymous?'匿名用户':item.nickname}}
							</view>
						</view>
						<view class="somment_time">
							{{item.add_time}}
						</view>
					</view>
					<view class="ping_connent ">
						{{item.content}}
					</view>
					<view class="ping_pic" style="display: flex; flex-wrap: wrap; " >
						<u-image @click="previewImage(ind , item.pic)" v-for="(ite,ind) in item.pic" :key="ind" style="margin-right: 16rpx; margin-bottom: 16rpx;" width="150rpx" height="150rpx"  :src="ite"></u-image>
					</view>
					
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
// import top from '@/componts/top/top.vue';
export default {
	components: {
		// top
	},
	data() {
		return {
			background: {
				backgroundColor: '#1c2227'
			},
			title: '评价',
			dataList: [], //评论列表
			ping_list: [
				{name:'全部评论' , number:0},
				{name:'晒图' , number:0},
				{name:'好评' , number:0},
				{name:'中评' , number:0},
				{name:'差评' , number:0},
			], //品论列表
			isChoose: 0,
			info: null,
			good_id: 0,
			stylestyle: {}
		};
	},
	async onLoad(e) {
		const res = uni.getSystemInfoSync();
		this.good_id = e.id;
		this.stylestyle = res.statusBarHeight;
	},
	methods: {
		previewImage(index , arr){
			uni.previewImage({
			  current: index, // 当前显示图片索引
			  urls: arr// 需要预览的图片http链接列表
			});
		},
		back() {
			uni.navigateBack();
		},
		choose(index) {
			this.isChoose = index;
			this.$refs.paging.reload();
		},
		// 获取评论列表
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			var data = {
				"page": pageNo,
				"limit": pageSize,
				"goods_id": this.good_id ,//商品id
				comments_type: this.isChoose,
			}
			this.$gugoApi.goods_comment_list(data).then(res=>{
				// this.dataList = res.data
				res.data.list.forEach((item,index)=>{
					res.data.list[index].pic = res.data.list[index].pic.split(',')
				})
				this.$refs.paging.complete(res.data.list);
				this.ping_list = [
					{name:'全部评论' , number:res.data.comment_count.all_comment},
					{name:'晒图' , number:res.data.comment_count.pic_comment},
					{name:'好评' , number:res.data.comment_count.good_comment},
					{name:'中评' , number:res.data.comment_count.mid_comment},
					{name:'差评' , number:res.data.comment_count.bad_comment},
				]
			}).catch(err=>{
				this.$refs.paging.complete(false);
			})
		},

	}
};
</script>

<style scoped lang="less">
@import url('./seeAll.css');
.top_box{
	box-shadow: none !important;
}
</style>